<template>
  <div class="upload">
    <PreviewComp :fileList="rec.fileVos" @delFile="delFile" :delFlag="true" />
    <van-uploader
      :multiple="true"
      accept="image/png,image/jpg,image/jpeg,video/mp4, video/quicktime"
      :before-read="handleBeforeRead"
      :after-read="handleAfterRead"
    >
      <div class="upload-box">
        <svg-icon icon-class="addImg" />
        <div class="upload-box-word">上传视频、照片</div>
      </div>
    </van-uploader>
  </div>
</template>
<script lang="ts" setup>
import { reactive } from "vue";
import { isArray } from "@/utils/is";
import {
  MAX_COUNT,
  MAX_IMG_SIZE,
  MAX_VIDEO_SIZE,
  IMG_TYPE,
  VIDEO_TYPE,
  IMG_UPLOAD_TYPE,
  VIDEO_UPLOAD_TYPE,
} from "./config";
import { Toast } from "vant";
import LocalCache from "@/utils/cache";
import { iptChange } from "@/utils/fileUtils";
import PreviewComp from "@/components/previewComp/index.vue";
const rec = reactive({
  fileVos: [], // 会议纪要图片/视频
});
const {
  //   name,
  //   personId,
  //   mobile,
} = LocalCache.getSession("userInfo");
/**
 * @description: 上传前
 * @param {*} file
 * @return {*}
 */
const handleBeforeRead = (file: any) => {
  Toast.loading({
    message: "上传中...",
    forbidClick: true,
    loadingType: "spinner",
    duration: 0,
  });
  const len = rec.fileVos.length;
  const currentLen = isArray(file) ? file.length : 1;
  if (len + currentLen > MAX_COUNT) {
    Toast.fail("照片和视频最多上传9个");
    return false;
  }
  // 已上传一个视频文件
  const hasVideo = rec.fileVos.filter((item) =>
    VIDEO_UPLOAD_TYPE.includes(item.type)
  );
  if (isArray(file)) {
    const videoList = file.filter((item) => VIDEO_TYPE.includes(item.type));
    const imgList = file.filter((item) => IMG_TYPE.includes(item.type));
    if (hasVideo.length + videoList.length > 1) {
      Toast.fail("视频最多上传1个");
      return false;
    }
    if (videoList.some((item) => item.size > MAX_VIDEO_SIZE)) {
      Toast.fail("视频单个大小最大320MB");
      return false;
    }
    if (imgList.some((item) => item.size > MAX_IMG_SIZE)) {
      Toast.fail("照片单张大小最大32MB");
      return false;
    }
    return true;
  } else {
    const { type, size } = file;
    if (VIDEO_TYPE.includes(type)) {
      if (hasVideo.length >= 1) {
        Toast.fail("视频最多上传1个");
        return false;
      } else {
        if (size > MAX_VIDEO_SIZE) {
          Toast.fail("视频单个大小最大320MB");
          return false;
        } else {
          return true;
        }
      }
    }
    if (IMG_TYPE.includes(type)) {
      if (size > MAX_IMG_SIZE) {
        Toast.fail("照片单张大小最大32MB");
        return false;
      } else {
        return true;
      }
    } else {
      Toast.fail("图片格式不正确，需要png、jpg、jpeg格式");
      // Toast.clear();
    }
  }
};
/**
 * @description: 上传后
 * @param {*} file
 * @return {*}
 */
const handleAfterRead = async (file: any) => {
  let fileList = [];
  if (isArray(file)) {
    fileList = [...file];
  } else {
    fileList.push(file);
  }
  const uploadFileApiList = [];
  fileList.forEach((item) => {
    uploadFileApiList.push(iptChange(item.file));
  });
  const res = await Promise.allSettled(uploadFileApiList);
  const fileVos = [...rec.fileVos];
  res.forEach((item) => {
    if (item.status === "fulfilled" && item.value?.finishStatus === 1) {
      Toast.clear();
      if (IMG_UPLOAD_TYPE.includes(item.value?.type)) {
        item.value.fileType = 1;
      }
      if (VIDEO_UPLOAD_TYPE.includes(item.value?.type)) {
        item.value.fileType = 2;
      }
      fileVos.push(item.value);
    } else {
      Toast.clear();
      Toast.fail(item.value?.message || "上传失败，请重试");
    }
  });
  rec.fileVos = [...fileVos];
};
// 删除图片
const delFile = (item) => {
  rec.fileVos = rec.fileVos.filter((ite) => ite.url !== item.url);
};
defineExpose({
  rec,
});
</script>
<style lang="less" scoped>
.upload {
  /deep/ .van-uploader {
    margin-top: 16px;
    margin-bottom: 12px;
    border-radius: 4px;
    border: 0.5px solid #e1e5ea;
  }
  .upload-box {
    height: 100px;
    width: 100px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    &-word {
      margin-top: 10px;
      font-size: 12px;
      line-height: 14px;
      color: #919599;
    }
  }
}
</style>
